<template>
	<view>
		<post-nav-bar title="用户主页"></post-nav-bar>
		<view class="blank"></view>
		<view class="userLayout pageBg">
			<view class="userInfo">
				<view class="avatar">
					<image v-if="user.profilePicture" :src="user.profilePicture + '?t=' + Date.now()" class="avatar"
						mode="aspectFill" />
					<!-- 当没有提供 profilePicture 时，显示默认图片 -->
					<image v-else src="../../static/image/user/user.jpg" class="avatar" mode="aspectFill" />
				</view>
				<view class="username">{{ user.username }}</view>
				<view class="userid">{{ user.userId }}</view>
				<!-- <view class="address">湖南</view> -->
			</view>
			<view class="user-stats">
				<navigator url="/pages/FollowUserPosts/FollowUserPosts" class="stat-publish">
					<view class="count">{{ format(user.myPostCount) }}</view>
					<view class="label">发布</view>
				</navigator>
				<view class="stat-subscribe">
					<view class="count">{{ format(user.followCount) }}</view>
					<view class="label">关注</view>
				</view>
				<view class="stat-fans">
					<view class="count">{{ format(user.followerCount) }}</view>
					<view class="label">粉丝</view>
				</view>
			</view>
			<view class="search-list">
				<Line></Line>
				<view class="result" v-for="(item, index) in dishList" :key="index" @click="goPost(item.dishId)">
					<view class="result-content">
						<image :src="getImage(item.imageUrl)" mode="aspectFill" class="result-image"></image>
						<view class="result-count-info">
							<view class="result-counts">
								<uni-icons type="hand-up" color="#ffffff" size="18"></uni-icons>
								<text>{{ format(item.likes) }}</text>
							</view>
							<view class="result-counts">
								<uni-icons type="star" color="#ffffff" size="18"></uni-icons>
								<text>{{ format(item.favorites) }}</text>
							</view>
						</view>
						<view class="result-info">
							<view class="title">
								<up-text :lines="2" :text="item.name" size="16"></up-text>
							</view>
							<view class="user">
								<uni-icons type="person" color="#888" size="18"></uni-icons>
								<text>{{ item.username }}</text>
							</view>
							<view class="views">
								<uni-icons type="eye" color="#888" size="19"></uni-icons>
								<text>{{ format(item.views) }}</text>
							</view>
						</view>
					</view>
					<Line></Line>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		appUrl
	} from '../../main';
	import {
		onShow
	} from '@dcloudio/uni-app' // 导入uniapp页面生命周期钩子
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	// 响应式数据
	const dishList = ref([]);
	const scrollTop = ref(0);
	const iconStyle = ref({
		color: '#ffffff'
	});
	const customStyle = ref({
		background: '#FF4D4F'
	});

	const login = ref(false)
	const user = ref({
		userId: "",
		username: "",
		phone: "",
		password: "",
		createdAt: "",
		updatedAt: "",
		profilePicture: "",
		bio: "",
		preference: "",
		vcode: "",
		followCount: "",
		followerCount: "",
		myPostCount: "",
		myPostViewCount: "",
		myCollectionCount: "",
		messageCount: ""
	})

	// 图片路径处理
	const getImage = (path) => {
		return `https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/food_moment_discover/train/data/${path}`;
	};
	
	const format = (num) => {
		if (num >= 100000) {
			return Math.round(num / 10000) + "w"
		} else if (num >= 10000) {
			return (Math.round(num / 1000)) / 10 + "w"
		} else {
			return num
		}
	}

	// 跳转详情页
	const goPost = (id) => {
		uni.setStorageSync('dishId', id)
		uni.navigateTo({
			url: "/pages/PostView/PostView"
		})
	}
	// 获取数据
	const fetchDishList = async () => {
		try {
			const followId = uni.getStorageSync("followId");
			const res = await uni.request({
				url: `${appUrl}/dish/${followId}`,
				method: "POST",
				data: {
					page: 1,
					limit: 20
				}
			});

			if (res.data.status === 200) {
				dishList.value = res.data.data.dishes;
			} else {
				uni.showToast({
					title: '用户发布为空',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('请求失败:', error);
			uni.showToast({
				title: '网络异常',
				icon: 'none'
			});
		}
	};
	//钩子
	onShow(() => {
		const followId = uni.getStorageSync("followId");
		fetchDishList();
		if (followId !== null && followId !== "") {
			uni.request({
					url: `${appUrl}/users/${followId}`,
					method: "get"
				}).then(res => {
					user.value = res.data.data;
				})
				.catch(error => {
					uni.showToast({
						icon: 'error',
						title: '请求失败'
					})
				});

		}
	})
</script>

<style lang="scss" scoped>
	.blank {
		height: 60rpx;
		background-color: ghostwhite;
		position: fixed;
		top: 70rpx;
		left: 0;
		width: 100%;
		z-index: 8;
	}

	.userLayout {
		height: 120vh;

		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 200rpx 50rpx 100rpx 50rpx;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				font-size: 44rpx;
				color: #333;
			}

			.userid {
				font-size: 28rpx;
				color: #999;
			}

			.address {
				font-size: 28rpx;
				color: #aaa;
			}
		}

		.user-stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;
			padding: 30rpx;

			.stat-publish {
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14x;
					color: #666;
					margin-top: 5px;
				}
			}

			.stat-subscribe {
				border-left: 1px solid #ccc;
				border-right: 1px solid #ccc;
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14px;
					color: #666;
					margin-top: 5px;
				}
			}

			.stat-fans {
				text-align: center;

				.count {
					font-size: 20px;
					color: #333;
				}

				.label {
					font-size: 14px;
					color: #666;
					margin-top: 5rpx;
				}
			}
		}

		.search-list {
			padding-top: 20rpx;
		}

		.result {
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;

			.result-content {
				display: flex;
				align-items: center;
				padding: 20rpx;
				gap: 20rpx;
				border-radius: 10rpx;
				background-color: #FFFFFF;

				.result-count-info {
					position: absolute;
					bottom: 20rpx;
					right: 400rpx;
					display: flex;
					align-items: center;
					padding: 10rpx;
					background-color: rgba(0, 0, 0, 0);
					color: white;
					font-size: 13px;
					gap: 25rpx;

					.result-counts {
						display: flex;
						gap: 4rpx;
						align-items: center;
					}
				}
			}
		}


		.result-image {
			width: 100%;
			height: 250rpx;
			max-width: 380rpx;
			min-width: 380rpx;
			border-radius: 10rpx;
		}

		.result-info {
			.title {
				font-size: 16px;
				color: #333;
				height: 100rpx;
			}

			.user {
				display: flex;
				font-size: 14px;
				color: #999;
				gap: 10rpx;
				align-items: center;
			}

			.views {
				display: flex;
				font-size: 15px;
				color: #999;
				gap: 10rpx;
				align-items: center;
				padding-top: 10rpx;
			}
		}
	}
</style>